<template>
  <div class="_wz_vehicleStatistics">
    <div style="display: flex;justify-content: flex-end;margin-top: 10px;height: 30px">
      <template v-for="item in vehicleStatisticsList">
        <div class="listItemTopl top0" :class="{'top1':vehicleStatistics.name == item.name}" @click="vehicleStatistics.name = item.name" style="font-family:'Barlow-Medium1'">{{item.name}}天</div>
      </template>
    </div>
    <div style="display: flex;height: calc(100% - 30px - 35px - 60px);">
      <div style="width: 50%;">
        <semicircleCharts  :charData="emissionType1"/>
      </div>
      <div style="width: 50%;">
        <semicircleCharts  :charData="emissionType2"/>
      </div>

    </div>
    <div style="height: 60px;color: white;display: flex;align-items: center;justify-content:space-around">
      <div style="display: flex;align-items: center">
        <div style="display: flex;align-items: center">
          <div style="width: 22px;height: 14px;background: #28BCFE;border-radius:3px"></div>
          <div style="margin-left: 5px">车辆营运</div>
        </div>
        <div style="margin-left: 10px;font-family:'Barlow-Medium1'">{{emissionType1.value1}}</div>
      </div>
      <div style="display: flex;align-items: center">
        <div style="display: flex;align-items: center">
          <div style="width: 22px;height: 14px;background: #ff9900;border-radius:3px"></div>
          <div style="margin-left: 5px">车辆离线</div>
        </div>
        <div style="margin-left: 10px;font-family:'Barlow-Medium1'">{{emissionType2.value1}}</div>
      </div>
    </div>
  </div>
</template>
<script>

import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import dayjs from "dayjs";
import {getMenu} from "@/util/getMenu";
import {getFirstMenu} from "@/router/dynamicRouting";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex



import lineChart from '@/components/charts/baiDu/lineChart/charts.vue'  //折线图
import areaChart from '@/components/charts/baiDu/areaChart/charts.vue'  //面积图
import tableRoll from '../dynamicVehicle/tableRoll.vue'  //表格轮播
import modulePage from '../../operational/modulePage.vue'  //全部图Charts

import semicircleCharts from '../dynamicVehicle/semicircleCharts.vue'  //半圆图
//reactive
export default defineComponent({
  name: 'vehicleStatistics',//组件名称
  components: {
    semicircleCharts,//半圆图
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $dayjs = inject('$dayjs');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法


    const state = reactive({

      switchIndex:0,
      vehicleStatistics:{name:3,value:[1,5]},//离线 运营 车辆数据切换
      vehicleStatisticsList:[
        {name:3,value:[3126,1682]},
        {name:7,value:[3703,1105]},
        {name:15,value:[4232,576]},
        {name:30,value:[4682,126]},
        {name:60,value:[4808,0]},
      ],



      emissionType1: {id:'emissionType7',unit:'%','name':'车辆营运',value:80,fontColor:'#28BCFE',lineColor:['#25BFFF','#5284DE','#2A95F9','#fff']},
      emissionType2: {id:'emissionType8',unit:'%','name':'车辆离线',value:80,fontColor:'#ff9900',lineColor:['#bd7203','#805801','#643d03','#fff']},



    });


    //页面加载初始化
    const loadInit = ()=>{


      setInterval(()=>{
        state.switchIndex = (state.switchIndex + 1 > 4 ) ? 0 : state.switchIndex + 1
        state.vehicleStatistics = state.vehicleStatisticsList[state.switchIndex]

        state.emissionType1.value =  (state.vehicleStatistics.value[0] / 4808 * 100).toFixed(2);
        state.emissionType1.value1 =  state.vehicleStatistics.value[0];
        state.emissionType2.value =  (state.vehicleStatistics.value[1] / 4808 * 100).toFixed(2);
        state.emissionType2.value1 =  state.vehicleStatistics.value[1];
      },3000)
    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadInit()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">
._wz_vehicleStatistics{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;


  .listItemTopl{
    width: 32px;
    height: 20px;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    cursor:pointer;
  }
  .top0{
    border: 1px solid;
    background: linear-gradient(45deg, #2C76BA, #779EBC);
    border-image: linear-gradient(45deg, #779EBC, #2C76BA) 1 1;
  }
  .top1{
    border: 1px solid;
    background: linear-gradient(45deg, #149f68, #079164);
    border-image: linear-gradient(45deg, #0b851e, #09b036) 1 1;
  }
}
</style>
